<template>
	<div class="ShooterList">
		<ShooterList-header :name='info.name'></ShooterList-header>
		<div class="deatil" >
			<p><span>姓名：</span>{{ info.name }}</p>
			<p><span>年龄：</span>{{ info.age }}岁</p>
			<p><span>球队：</span>{{  club.name_zh}}</p>
			<p><span>球衣号码：</span>{{ info.number }}号</p>
			<p><span>入队时间：</span>{{ club.hire_time}}</p>
		</div>
		<div class="flex">
			<p>综合能力<span class="span-green">{{ info.overall }}</span></p>
			<p>潜力<span class="span-purple">{{ info.potential }}</span></p>
			<p>惯用脚<span>{{ appraise.habbit_foot }}</span></p>
		</div>
		<div class="canvas" id="chart_example_shooter"></div>
	</div>	
</template>
<script>
import ShooterListHeader from './components/Header'
import echarts from 'echarts'
import axios from 'axios'
import { Toast  } from 'mint-ui'
export default {
	name: 'ShooterList',
	components:{
		ShooterListHeader,
	},
	data:function(){
		return {
			info:{},
			hex:{},
			club:{},
			appraise:{},
		}
	},
	methods:{
		goback(){
			this.$router.go(-1);
		},
		getInfo:function(name,num){
			var t = this;
			axios.get('/api/getFifaData.php?eng='+decodeURI(name)+'&number='+num)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.info = data
						t.club = data.club
						t.hex = data.hex
						t.appraise = data.appraise
						if (t.hex) {
							console.log($('.canvas').length)
							let myChart = echarts.init(document.getElementById('chart_example_shooter'));
							let value = [t.hex.pointPAC,t.hex.pointSHO,t.hex.pointPAS,t.hex.pointDRI,t.hex.pointDEF,t.hex.pointPHY]
							console.log(value)
							var option = {
								    radar: {
								        name: {
								            textStyle: {
								                color: '#828181',
								                padding: [3, 5]
								           }
								        },
								        indicator: [
								           { name: '速度', max:100},
								           { name: '射门', max:100},
								           { name: '传球', max:100},
								           { name: '盘带', max:100},
								           { name: '防守', max:100},
								           { name: '力量', max:100}
								        ]
								    },
								    series: [{
								        type: 'radar',
								        data : [
								            {
								                value : value,
								                label: {
							                        normal: {
							                        	color:'#70C434',
							                            show: true,
							                            formatter:function(params) {
							                                return params.value;
							                            }
							                        }
							                    },
							                    areaStyle: {
							                        normal: {
							                            opacity: 0.9,
							                            color:'rgba(112,196,52,0.16)',
							                            border:'1px #f90 solid'
							                        }
							                    },
							                    lineStyle:{
							                    	color:'#70C434',
							                    	width:'2'
							                    }
								            },
								        ]
								    }]
							};
							myChart.setOption(option);
						}else{
							t.$router.push('/error')
						}
					}else{
						Toast(res.message)
						t.info = null
					}
				})
				.catch(function (error) {
				    console.log(error);
				  });
		},
	},
	created(){
		
	},
	mounted(){
		let name = encodeURI(this.$route.params.name),
			num = this.$route.params.num;
		this.getInfo(name,num)
		
	},
};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  .deatil{
  	padding: 1.4rem .4rem 0rem;
  	border-bottom: .1rem @bggray solid;
  	p{
  		padding-bottom: .4rem;
  		font-size: .3rem;
  		color: #4F4F4F;
  		span{
  			font-weight: bold;
  		}
  	}
  }
  .flex{
  	padding:.3rem;
  	display: flex;
  	justify-content: space-around;
  	border-bottom:1px  @bggray solid;
  	p{
  		font-size: .24rem;
  		color:@grayColor;
  		line-height: .36rem;
  	}
  	span{
  		display: inline-block;
  		height: .36rem;
  		line-height: .36rem;
  		text-align: center;
  		color: #161616;
  		margin-left: .1rem;
  	}
  	.span-green{
  		width: .6rem;
  		border-radius: 5px;
  		background: @greenColor1;
  		color: #fff;
  	}
  	.span-purple{
  		width: .6rem;
  		border-radius: 5px;
  		background: #8058BD;
  		color: #fff;
  	}
  }
  .canvas{
  	width: 90%;
  	padding:.3rem 0;
  	margin:auto;
  	height: 300px;
  }
</style>